<template>
  <div>
    <!--页名-->
    <el-row>
      <label  style="font-size: 32px;font-family: Arial;float:left;margin-bottom: 20px">KPI/PI</label>
    </el-row>
    <!--返回箭头-->
    <el-row>
      <el-col :span="1">
        <el-button @click="returnSecond" icon="el-icon-arrow-left"></el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="13">
        <label style="font-size: 25px;font-family: Arial;float:left;margin-top: 20px">批次报告: 订单号 6645225 批次号 167852942 品牌 百威</label>
      </el-col>
      <el-col :span="6" :offset="4">
        <GYRLegend></GYRLegend>
      </el-col>
    </el-row>


    <el-row style="margin-top:15px">
      <el-table
        :data="tableData_BatchReport"
        style="width: 100%"
        max-height="570">

        <el-table-column
          prop="pi"
          label="PI">
        </el-table-column>
        <el-table-column
          prop="factor"
          label="影响因素">
        </el-table-column>
        <el-table-column
          prop="actual"
          label="实际值">
        </el-table-column>
        <el-table-column
          prop="standard"
          label="标准值">
        </el-table-column>
        <el-table-column
          prop="upred"
          label="上限红区">
        </el-table-column>
        <el-table-column
          prop="upyellow"
          label="上限黄区">
        </el-table-column>
        <el-table-column
          prop="downyellow"
          label="下限黄区">
        </el-table-column>
        <el-table-column
          prop="downred"
          label="下限红区">
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态">
          <template   slot-scope="scope">
            <img @click="showDialog" :src="scope.row.imgAddr" min-width="10" height="10" />
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <!--对话框-->
    <el-dialog title="行动计划" :visible.sync="centerDialogVisible" width="40%">
      <div class="alartBox">
          <el-button type="primary" @click="planJump($event)" plain>异常报警记录</el-button>
          <el-button type="primary" @click="planJump($event)" plain>SOP/OPL</el-button>
          <el-button type="primary" @click="planJump($event)" plain>SHO-PI</el-button>

          <el-button type="primary" @click="planJump($event)" plain>Checklist</el-button>
          <el-button type="primary" @click="planJump($event)" plain>OWD</el-button>
          <el-button type="primary" @click="planJump($event)" plain>热点</el-button>

          <el-button type="primary" @click="planJump($event)" plain>Worklist</el-button>
          <el-button type="primary" @click="planJump($event)" plain>SIC</el-button>
          <el-button type="primary" @click="planJump($event)" plain>班组优先事项</el-button>

          <el-button type="primary" @click="planJump($event)" plain>5-Why</el-button>
          <el-button type="primary" @click="planJump($event)" plain>OWD</el-button>
          <el-button type="primary" @click="planJump($event)" plain>Pmap</el-button>
      </div>

      <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  import GYRLegend from "@/pages/contents/tracking/KPIPIPages/subComponents/GYRLegend";
  export default {
    name: "KPIPIThird",
    components:{
      GYRLegend,
    },
    methods:{
      returnSecond(){
        this.$router.push('/kpipi_second');
      },

      showDialog(){
        this.centerDialogVisible = true;
      }
    },
    data() {
      return {
        centerDialogVisible: false,
        tableData_BatchReport: [{
          pi: '麦汁PH',
          factor: '糖化锅乳酸添加量',
          actual: '1580L',
          standard: '1550L',
          upred: '1458L',
          upyellow: '1500L',
          downyellow: '1350L',
          downred: '1300',
          imgAddr:require("@/assets/tableGreenCircle.png"),
        },{
          pi: '麦汁PH',
          factor: '糖化锅乳酸添加量',
          actual: '1580L',
          standard: '1550L',
          upred: '1458L',
          upyellow: '1500L',
          downyellow: '1350L',
          downred: '1300',
          imgAddr:require("@/assets/tableGreenCircle.png"),
        },{
          pi: '麦汁PH',
          factor: '糖化锅乳酸添加量',
          actual: '1580L',
          standard: '1550L',
          upred: '1458L',
          upyellow: '1500L',
          downyellow: '1350L',
          downred: '1300',
          imgAddr:require("@/assets/tableGreenCircle.png"),
        },{
          pi: '麦汁PH',
          factor: '糖化锅乳酸添加量',
          actual: '1580L',
          standard: '1550L',
          upred: '1458L',
          upyellow: '1500L',
          downyellow: '1350L',
          downred: '1300',
          imgAddr:require("@/assets/tableGreenCircle.png"),
        },]
      }
    }
  }
</script>

<style scoped lang="scss">
  .alartBox {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
  .el-button {
    width: 160px;
    margin-bottom: 10px;
    margin-left: 40px;
    margin-right: 24px;
  &:nth-child(3n) {
     margin-right: 0;
   }
  &:nth-last-child(-n+3) {
     margin-bottom: 0;
   }
  }
  }
</style>



